<template>
     <el-dialog  class="edit-box" :title="'开票明细页面'" :visible.sync="dialog.visible" append-to-body top="5vh"
             width="1280px">

        <table  ref="print" id="mypost" cellspacing=0 border=1 cellpadding=10 style="width:100%;border-collapse: collapse;" >
            <tr>
                <td colspan="6" style="height:80px;font-size:22px;"><b>开票申请单</b></td>
            </tr>

            <tr>
                <td colspan="6" align='center' style="color:#666">基本信息</td>
            </tr>

            <tr>
                <td width="15%" align="center">开票申请人</td>
                <td width="15%" class='box'>{{detailData.createName}}</td>
                <td width="15%">申请部门</td>
                <td width="15%" class='box'>{{detailData.applyDeptName}}</td>
                <td width="15%">项目名称</td>
                <td width="15%" class='box'>{{detailData.projectName}}</td>
            </tr>

            <tr>
                <td>项目编号</td>
                <td  class='box'>{{detailData.projectNo}}</td>
                <td>合同编号</td>
                <td colspan="3"  class='box'>{{detailData.contractNo}}</td>
                
            </tr>

            <tr>
                <td colspan="6" align='center' style="color:#666">开票信息</td>
            </tr>

            <tr>
                <td>我方开票公司</td>
                <td class='box'>{{detailData.ourInvoiceCompanyName}}</td>
                <td>收票联系人</td>
                <td class='box'>{{detailData.invoiceReceiverName}}</td>
                <td>联系地址</td>
                <td class='box'>{{detailData.invoiceReceiverAddress}}</td>
            </tr>

            <tr>
                <td>联系人电话</td>
                <td class='box'>{{detailData.invoiceReceiverPhone}}</td>
                <td>备注信息</td>
                <td colspan="3" class='box'>{{detailData.remark}}</td>
                
            </tr>

            <tr>
                <td colspan="6" align='center' style="color:#666">费用说明</td>
            </tr>

            <tr>
                <td>费用所属月</td>
                <td class='box'>{{detailData.expenseMonth}}</td>
                <td>工资费用</td>
                <td class='box'>{{detailData.salaryExpense}}</td>
                <td>社保费用</td>
                <td class='box'>{{detailData.socialSecurityExpense}}</td>
                
            </tr>

            <tr>
                <td>管理费用</td>
                <td class='box'>{{detailData.managementExpense}}</td>
                <td>其他费用</td>
                <td class='box'>{{detailData.otherExpense}}</td>
                
                <td>合计金额</td>
                <td colspan="1" class='box'>{{detailData.sumMoney}}</td>
            </tr>

            <tr>
                <td colspan="6" align='center' style="color:#666">开票明细</td>
            </tr>
            <tr><td colspan="6" style="padding:0">
            <table cellspacing=0 border=1 cellpadding=5 style="width:100%;border-collapse: collapse;border-width:0px; border-style:hidden;">
                
                <tr>
                    <td width="12%">收票单位全称</td>
                    <td width="16%">纳税人识别号</td>
                    <td>地址与电话</td>
                    <td>开户行及账号</td>
                    <td width="12%">开票类型</td>
                    <td width="9%">开票金额(含税)</td>
                    <td width="9%">其他金额</td>
                    <td width="9%">税额</td>
                    <td width="9%">备注说明</td>
                </tr>

                <tr  v-for="item,index in detailData.hrInvoiceDetails">
                    <td class='box'>{{item.receiveCompanyName}}</td>
                    <td class='box'>{{item.taxpayerIdentificationNumber}}</td>
                    <td class='box'>{{item.addressAndPhone}}</td>
                    <td class='box'>{{item.openingBankAndNo}}</td>
                    <td class='box'>{{item.invoiceTypeFullName}}</td>
                    <td class='box'>{{item.includeTaxMoney}}</td>
                    <td class='box'>{{item.otherMoney}}</td>
                    <td class='box'>{{item.taxMoney}}</td>
                    <td class='box'>{{item.remark}}</td>
                </tr>

                <tr>
                    <td>合计</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class='box'>{{includeTaxMoneyAll}}</td>
                    <td class='box'>{{otherMoneyAll}}</td>
                    <td class='box'>{{taxMoneyAll}}</td>
                    <td></td>
                </tr>

                
            </table>
            </td></tr>
        </table>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">取消</el-button>
            <el-button type="primary" @click="handlePrint">打印</el-button>
            <el-button type="success" @click="handleOk" v-show="handleOkVisible" v-hasPermi="['hr:invoice:summary:completed']">已完成</el-button>
        </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
import request from '@/utils/request'
  import commonMixins from '@/mixins/common'
  import salaryMixins from '@/mixins/salary'
  import Print from '@/plugs/print' // 引入附件的js文件
  Vue.use(Print) // 注册
  

 let isCurrency = /^(([1-9]\d*)|0)(\.\d{1,2})?$/
 
    export default {
        mixins: [commonMixins],
        created(){
            
            
        },
        data(){
            return {
                dialog: {
                    visible: false, // 是否显示
                    title: '个人简历'
                },
                detailInfo: null,
                handleOkVisible: true
            }
        },
         props: {
            visible: {
                type: [Boolean],
                required: true,
                default: false
            },
            detailData: {
                type: Object,
                default() {
                return null
                }
            }
        },

        computed:{
            includeTaxMoneyAll(){
                let includeTaxMoneyAll = 0;
                if(this.detailData && this.detailData.hrInvoiceDetails){
                    let expression = `0`;
                    for(let i = 0;i < this.detailData.hrInvoiceDetails.length;i++){
                        let hrInvoiceDetail = this.detailData.hrInvoiceDetails[i];
                        expression +=  `+${hrInvoiceDetail.includeTaxMoney}`
                    }

                    includeTaxMoneyAll = parseFloat(this.formatNumberTiny({
                        formula: `${expression}`, format: '0.00'
                    }))
                }
                return includeTaxMoneyAll;
            },
            otherMoneyAll(){
                let otherMoneyAll = 0;
                if(this.detailData && this.detailData.hrInvoiceDetails){
                    let expression = `0`;
                    for(let i = 0;i < this.detailData.hrInvoiceDetails.length;i++){
                        let hrInvoiceDetail = this.detailData.hrInvoiceDetails[i];
                        expression +=  `+${hrInvoiceDetail.otherMoney}`
                    }

                    otherMoneyAll = parseFloat(this.formatNumberTiny({
                        formula: `${expression}`, format: '0.00'
                    }))
                }
                return otherMoneyAll;
            },
            taxMoneyAll(){
                let taxMoneyAll = 0;
                if(this.detailData && this.detailData.hrInvoiceDetails){
                    let expression = `0`;
                    for(let i = 0;i < this.detailData.hrInvoiceDetails.length;i++){
                        let hrInvoiceDetail = this.detailData.hrInvoiceDetails[i];
                        expression +=  `+${hrInvoiceDetail.taxMoney}`
                    }

                    taxMoneyAll = parseFloat(this.formatNumberTiny({
                        formula: `${expression}`, format: '0.00'
                    }))
                }
                return taxMoneyAll;
            },






        },

        methods: {
           handlePrint() {
                this.$print(this.$refs.print) // 使用
            },
            
            async initData() { // 初始化数据
            },
            
            handleOk(){
                console.log(this.detailData)
                let id = this.detailData.id
                let status = this.detailData.status - 0
                request({
                    url: '/hr/invoice/summary/completed',
                    method: 'post',
                    data: {
                       id,status
                    }
                }).then(response => {
                    if (response.code != '200') {
                        this.msgError('操作失败，原因是' + response.msg)
                        return
                    }
                    //正确的话就隐藏这个按钮
                    this.handleOkVisible = false
                     this.msgSuccess('操作成功！')
                    this.$emit('on-init')

                })

            }
        },


    watch: {
      visible(newVal, oldVal) {
        if (newVal !== this.dialog.visible) {
          this.dialog.visible = newVal
        }
      },
      'dialog.visible'(newVal, oldVal) {
        if (!newVal) {
          this.detailInfo = {}
        }
        this.$emit('update:visible', newVal)
      },
      detailData: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.detailInfo)) {
            this.detailInfo = JSON.parse(JSON.stringify(newVal))
            
            if(this.detailInfo.invoiceStatus == '已开票'){
                this.handleOkVisible = false
            }else{
                this.handleOkVisible = true
            }
          }
        },
        deep: true,
        immediate: true
      }
    },

    }


</script>

<style lang="scss" scoped>
    #mypost td{
        text-align: center;
        padding:4px 6px;
    }

    #mypost td.box{
        text-align: left;
    }


</style>